<template>
  <div class="layout">
    <div class="layout__panel" style="width: 100%; height: 80px; overflow: inherit">
      <div class="article-bar flex flex--align-center flex--row">
        <div class="article-bar__link-box">
          <a href="/blogList" title="返回博客列表" class="btn-goback">
            <i class="el-icon-arrow-left"></i>
            <span>博客列表</span>
          </a>
        </div>
        <el-form ref="blogRef" :model="blog" :rules="blogRules" style="height: 40px; margin-left: 20px; margin-right: 20px">
          <el-form-item prop="title" style="float: left; margin-right: 20px">
            <el-input type="text" style="width: 500px" v-model="blog.title" placeholder="请输入文章标题（5 ~ 100个字）" clearable size="small"/>
          </el-form-item>
          <el-form-item prop="typeId" style="float: left">
            <el-select v-model="blog.typeId" placeholder="请选择文章分类" size="small" clearable>
              <el-option v-for="item in blogTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="article-bar__user-box flex--row flex" >
          <button @click="submit('blogRef')" class="btn btn-publish"><span>发布博客</span></button>
        </div>
      </div>
    </div>
    <div>
      <mavon-editor v-model="blog.content" :ishljs = "true" ref=md scrollStyle :toolbars="toolbars" style="height: 450px"/>
    </div>
  </div>
</template>

<script>
  import {addBlog,getByIdBlog,updateBlog} from "@/api/blog"
  import {getBlogTypeList} from "@/api/blogType"
  export default {
    data() {
      return {
        // 博客信息
        blog: {
          author: JSON.parse(localStorage.getItem("loginName")),
          title: '',
          content: '',
          typeId: '',
        },
        // 必填
        blogRules: {
          title: [
            { required: true, message: "请输入标题",  trigger: "blur" }
          ],
          typeId: [
            { required: true, message: '请选择分类',  trigger: 'change' }
          ]
        },
        // 工具栏
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true,
          navigation: true, // 导航目录
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          subfield: true, // 单双栏模式
          preview: true, // 预览
        },
        // 博客分类列表
        blogTypeList: [],
      }
    },
    created() {
      this.getBlogType()
      if(this.$route.query.id != null){
        this.getBlogEdit()
      }
    },
    methods: {
      // 博客分类
      getBlogType(){
        getBlogTypeList().then( res => {
          this.blogTypeList = res.data.data
        })
      },
      // 博客修改
      getBlogEdit(){
        this.loading = true
        const id = this.$route.query.id
        getByIdBlog(id).then(res =>{
          this.blog = res.data.data
          this.loading = false
        })
      },
      // 提交
      submit(blogRef){
        this.$refs[blogRef].validate((valid) => {
          if(valid){
            this.$confirm('是否提交?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if(this.blog.id == null){
                this.blog.content = this.$refs.md.d_value
                addBlog(this.blog)
                this.$message({
                  type: 'success',
                  message: '发布成功!'
                });
                this.$router.push("/blogList")
              }else {
                updateBlog(this.blog)
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.$router.push("/blogList")
              }
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消提交'
              });
            })
          }
        })
      },
    }
  }
</script>

<style>
  .layout {
    width: 100%;
    height: 100%;
  }
  .layout__panel {
    position: relative;
    width: 100%;
    height: 100%;
    flex: none;
    overflow: hidden;
  }
  .article-bar {
    height: 100%;
  }
  .flex--align-center {
    align-items: center;
  }
  .flex--row {
    flex-direction: row;
  }
  .flex {
    display: flex;
  }
  .article-bar__link-box {
    padding-left: 24px;
    font-size: 16px;
  }
  .article-bar__link-box a.btn-goback {
    display: block;
    width: 88px;
    height: 25px;
    line-height: 25px;
    color: #303133;
    cursor: pointer;

  }
  a {
    background-color: transparent;
    text-decoration:none;
  }
  .article-bar__user-box {
    padding: 8px 32px 8px 0;
  }
  .article-bar__user-box .btn-publish {
    height: 37px;
    padding: 0 16px;
    font-size: 16px;
    color: #fff;
    border: none;
    border-radius: 18px;
    white-space: nowrap;
    cursor: pointer;
    background: linear-gradient(92deg,#ffba40,#ff503e 37%,#ff2f50 81%,#ff1b40);
  }
</style>
